<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item
            :to="{ name: 'MatchList' }"
            class="breadcrumb_active_item"
            v-if="headerKey == 3"
            >赛事名称管理</el-breadcrumb-item
          >
          <el-breadcrumb-item class="breadcrumb_active_item" v-else
            >报名管理</el-breadcrumb-item
          >
          <!-- <el-breadcrumb-item class="breadcrumb_active_item"
            ><span @click="matchDetail()" style="cursor: pointer">
              {{ enrollData.title }}
            </span></el-breadcrumb-item
          >
          <el-breadcrumb-item
            class="breadcrumb_active_item"
            v-if="headerKey == 3"
            ><span @click="enrollList(3)" style="cursor: pointer">
              报名名单
            </span></el-breadcrumb-item
          >
          <el-breadcrumb-item
            class="breadcrumb_active_item"
            v-if="headerKey == 1"
            ><span @click="enrollList(1)" style="cursor: pointer">
              报名审核
            </span></el-breadcrumb-item
          > -->
          <!-- <el-breadcrumb-item
            class="breadcrumb_active_item"
            v-if="headerKey == 2"
            ><span @click="enrollList(2)" style="cursor: pointer">
              报名名单
            </span></el-breadcrumb-item
          > -->
          <el-breadcrumb-item>制证详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="audit_detail_content">
        <el-row>
          <el-col :span="24">
            <el-steps
              :space="200"
              :active="activeVal"
              finish-status="success"
              align-center
            >
              <el-step
                v-for="item in nodesLsit"
                :key="item.id"
                :title="item.title"
              ></el-step>
            </el-steps>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="16">
            <div class="line_title">报名信息</div>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-form
            ref="enrollFrom"
            :model="enrollData"
            :rules="rules"
            label-width="140px"
          >
            <el-col :span="16">
              <el-col :span="12">
                <el-form-item label="姓名" size="small" prop="name">
                  <el-input v-model="enrollData.name" maxlength="30"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="手机号" size="small" prop="phone">
                  <el-input v-model="enrollData.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名拼音" size="small" prop="company">
                  <el-input v-model="enrollData.name_pinyin"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="国籍" size="small" prop="company">
                  <el-input v-model="enrollData.country"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位" size="small" prop="company">
                  <el-input v-model="enrollData.company"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工作岗位" size="small" prop="position">
                  <el-input v-model="enrollData.position"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="赛事名称" size="small" prop="title">
                  <el-input
                    v-model="enrollData.title"
                    maxlength="30"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="部门:" size="small" prop="department_id">
                  <el-select
                    v-model="enrollData.department_id"
                    placeholder="请选择"
                    disabled
                  >
                    <el-option
                      v-for="(item, index) in departmentList"
                      :key="index"
                      :label="item.department_name"
                      :value="item.department_id"
                      disabled
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="证件种类:" size="small" prop="pass_id">
                  <el-select v-model="enrollData.pass_id" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in passList"
                      :key="index"
                      :label="item.pass_name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件编号" size="small" prop="card_number">
                  <el-input
                    v-model="enrollData.card_number"
                    maxlength="30"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报名时间:" size="small" prop="created_at">
                  <el-input v-model="enrollData.created_at" disabled></el-input>
                </el-form-item>
              </el-col>

              <!-- 新加字段 -->
              <el-col :span="12">
                <el-form-item label="信息来源" size="small" prop="title">
                  <el-input
                    v-model="enrollData.source_text"
                    maxlength="30"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="现居住地址" size="small" prop="title">
                  <el-input
                    v-model="enrollData.address"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作人" size="small" prop="title">
                  <el-input
                    v-model="enrollData.source_userid_text"
                    maxlength="30"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="审核状态" size="small">
                  <el-tag size="small" :type="statusType">{{
                    formatterStatusFn(enrollData.status)
                  }}</el-tag>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="审核人" size="small" prop="audit_name">
                  <el-input
                    v-model="enrollData.audit_name"
                    maxlength="30"
                    placeholder="无"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-col>

            <el-col :span="4">
              <!-- <img
                v-if="enrollData.photo != null && enrollData.photo != ''"
                :src="enrollData.photo"
                class="descriptions_photo"
              /> -->
              <el-form-item label="照片" size="small" prop="photo">
                <el-upload
                  class="match_from_uploader"
                  :data="uploadData"
                  :action="actionUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :headers="headers"
                >
                  <img
                    v-if="enrollData.photo"
                    :src="enrollData.photo"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="20">
            <div class="line_title">权限区域</div>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="20">
            <el-checkbox-group class="b1" v-model="auditFormData.auditAreaList">
              <el-checkbox
                v-for="item in areaList"
                :key="item.id"
                :label="'' + item.id"
                ><div class="jia">
                  <img class="imgs" :src="item.area_icon" alt="" />
                  <p class="p1">{{ item.area_name }}</p>
                </div></el-checkbox
              >
            </el-checkbox-group>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="16">
            <div class="form_bottom">
              <el-button
                class="butss"
                type="primary"
                size="mini"
                @click="editDetailBtn()"
              >
                确认修改
              </el-button>
            </div>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="20">
            <div class="line_title">备注</div>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="8">
            <el-input
              type="textarea"
              :rows="2"
              resize="none"
              placeholder="请输入内容"
              :autosize="{ minRows: 3, maxRows: 6 }"
              v-model="auditFormData.remark"
              :disabled="btnKey == 2"
            >
            </el-input>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="20">
            <div class="line_title">审核记录</div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="20">
            <el-table :data="logsListData" style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="title" label="内容" align="center">
              </el-table-column>
              <el-table-column prop="remark" label="备注" align="center">
              </el-table-column>
              <el-table-column
                prop="created_at"
                label="操作时间"
                width="220"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <!-- <div class="audit_detail_btn_box" v-if="btnKey != 2">
      <el-button
        type="danger"
        v-if="
          this.$route.query.application != 'B' && this.enrollData.status == '3'
        "
        size="mini"
        @click="comeback()"
        >重新提交</el-button
      >
      <el-button
        type="primary"
        v-if="this.$route.query.application != 'A'"
        size="mini"
        @click="adoptFn()"
        >通过</el-button
      >
      <el-button
        type="danger"
        v-if="this.$route.query.application != 'A'"
        size="mini"
        @click="failFn()"
        >不通过</el-button
      >

      <el-button size="small" type="info" @click="gobancklist()"
        >加入黑名单</el-button
      >
      <el-button type="info" size="mini" @click="backBtn()"
        >返回上一页</el-button
      >
    </div> -->
  </div>
</template>
<style src="../../assets/css/audit/auditDetail.css" scoped></style>

<script>
export default {
  name: "AuditDetail",
  components: {},
  data() {
    return {
      userType: this.$store.state.loginUserType == "ADMINLOGINUSERCH" ? 0 : 1, // 用户类型;1. 普通; 0. 超级;
      baseAPIUrl: this.$store.state.baseAPIUrl,
      loadingKey: false,
      loadingText: "",
      btnKey: 2, // 审核按钮控制;1.显示--超管; 2. 不显示; 3.显示--普通
      headerKey: 1, // 导航控制;1. 审核; 2.名单; 3.赛事名称管理
      enrollId: "", // 报名id
      statusList: [
        {
          key: 1,
          value: "审核中",
          type: "warning",
        },
        {
          key: 2,
          value: "审核完成",
          type: "success",
        },
        {
          key: 3,
          value: "待重新提交审核",
          type: "warning",
        },
      ], // 审核状态字典
      activeVal: 0, // 步骤条选中值
      finishStatus: "wait", // 步骤条选中状态
      nodesLsit: [], // 流程数据
      enrollData: {
        id: "", // 记录id
        event_id: "", // 赛事名称ID
        title: "", // 赛事名称名称
        department_id: "", // 部门ID
        department_name: "", // 部门
        pass_id: "", // 证件种类ID
        pass_mark: "", // 证件种类值
        area_ids: "", // 活动权限区域ID
        area_mark: "", // 活动权限区域值

        name: "", // 姓名
        phone: "", // 手机号
        photo: "", // 照片
        local_photo: "", // 照片服务器路径
        company: "", // 公司
        position: "", // 工作岗位

        status: "", // 审核状态
        audit_name: "", // 审核人名称
        created_at: "", // 创建时间
        updated_at: "", // 更新时间
        address: "", //居住地
        source_text: "", //信息来源
        source_userid_text: "", //操作人
      }, // 报名数据
      rules: {
        photo: [{ required: true, message: "上传照片", trigger: "change" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        company: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        // position: [
        //   { required: true, message: "请输入工作岗位", trigger: "blur" },
        //   {
        //     min: 2,
        //     max: 10,
        //     message: "长度在 2 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        department_id: [
          { required: true, message: "请选择部门", trigger: "change" },
        ],
        pass_id: [
          { required: true, message: "请选择证件种类", trigger: "change" },
        ],
      },
      statusType: "", // 审核状态颜色
      logsListData: [], // 日志数据
      auditFormData: {
        auditAreaList: [],
        remark: "",
      }, // 审核提交
      areaList: [], // 权限区域列表
      departmentList: [], // 部门列表
      passList: [], // 证件种类
      actionUrl: this.$store.state.baseAPIUrl + "/upload/uploadFile", // 上传路径
      uploadData: {
        source: 8,
      }, // 上传额外参数
      headers: {
        Authorization: this.$store.state.loginToken,
      }, // 上传用token
    };
  },
  created: function () {
    let query = this.$route.query;
    if (query.id != undefined && query.id != "") {
      this.enrollId = query.id;
    }
    if (query.key != undefined && query.key != "") {
      this.btnKey = query.key;
    }
    if (query.header != undefined && query.header != "") {
      this.headerKey = query.header;
    }

    this.getDataFn();
  },
  methods: {
    // 获取权限区域列表数据
    getAreaListDataFn: function () {
      let that = this;
      let url = "/admin/area/index";
      let data = {
        event_id: this.enrollData.event_id,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.areaList = response.list;
            console.log(response);
            let list = [];
            if (
              that.enrollData.area_ids != "" &&
              that.enrollData.area_ids != null &&
              that.enrollData.area_ids != undefined
            ) {
              list = that.enrollData.area_ids.split(",");
            }
            that.auditFormData.auditAreaList = list;
            that.auditFormData.remark = "";
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // //重新提交
    // comeback() {
    //   // console.log(row);
    //   let that = this;
    //   let url = "/admin/apply/resubmit";
    //   let data = {
    //     id: that.enrollData.id,
    //   };
    //   that.loadingText = "加载中...";
    //   that.loadingKey = true;
    //   this.axios
    //     .post(url, data)
    //     .then((response) => {
    //       that.loadingKey = false;
    //       if (response.code == 0) {
    //         this.$router.replace({
    //           name: "AuditAllList",
    //           query: {
    //             matchId: this.$route.query.matchId,
    //             companyKey: this.$route.query.companyKey,
    //             key: "3",
    //             header: "1",
    //             department_id: this.$route.query.department_id,
    //             company_two: this.$route.query.company_two,
    //             department_name: this.$route.query.department_name,
    //             keywords: this.$route.query.keywords,
    //           },
    //         });
    //       } else {
    //         that.$message.error(response.msg);
    //       }
    //     })
    //     .catch(function (error) {
    //       that.loadingKey = false;
    //       console.log(error);
    //     });
    // },
    // 获取报名数据
    getDataFn: function () {
      let that = this;
      let url = "/admin/apply/show";
      let data = {
        id: this.enrollId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.enrollData = response.apply;

            that.logsListData = response.logs;
            let key = 0;
            that.nodesLsit = response.nodes;
            that.nodesLsit.forEach((item) => {
              if (item.status == 1) {
                if (key != that.nodesLsit.length) {
                  key++;
                }
              }
            });
            that.activeVal = key;
            that.getAreaListDataFn();
            that.getDepartmentListFn();
            that.getPassListFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取部门列表
    getDepartmentListFn: function () {
      let that = this;
      let url = "/admin/eventdepartment/index";
      let data = {
        event_id: this.enrollData.event_id,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.departmentList = response.list;
            console.log(that.departmentList, "部门列表");
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取证件种类列表
    getPassListFn: function () {
      let that = this;
      let url = "/admin/pass/index";
      let data = {
        event_id: this.enrollData.event_id,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.passList = response.list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 审核状态格式化
    formatterStatusFn: function (val) {
      let that = this;
      let status = val;
      let text = "";
      this.statusList.forEach(function (item) {
        if (item.key == status) {
          text = item.value;
          that.statusType = item.type;
        }
      });
      return text;
    },

    // 保存修改信息
    editDetailBtn: function () {
      let that = this;
      let url = "/admin/apply/update";
      let data = {
        id: this.enrollData.id,
        event_id: this.enrollData.event_id,
        department_id: this.enrollData.department_id,
        name: this.enrollData.name,
        photo: this.enrollData.photo,
        local_photo: this.enrollData.local_photo,
        company: this.enrollData.company,
        position: this.enrollData.position,
        pass_id: this.enrollData.pass_id,
        address: this.enrollData.address,
        name_pinyin: this.enrollData.name_pinyin,
        country: this.enrollData.country,
        phone: this.enrollData.phone,
        identity_number: this.enrollData.identity_number,
        area_ids: this.auditFormData.auditAreaList.join(","),
      };

      this.$refs.enrollFrom.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          that
            .$confirm("确认修改?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
            })
            .then(() => {
              that.loadingText = "处理中...";
              that.loadingKey = true;
              that.axios
                .post(url, data)
                .then((response) => {
                  that.loadingKey = false;
                  if (response.code == 0) {
                    that.$message.success("操作成功");
                    that.getDataFn();
                  } else {
                    that.$message.error(response.msg);
                  }
                })
                .catch(function (error) {
                  that.loadingKey = false;
                  console.log(error);
                });
            });
        }
      });
    },
    // 上传成功钩子
    handleAvatarSuccess: function (res, file) {
      this.imageShowUrl = URL.createObjectURL(file.raw);
      this.enrollData.photo = res.image;
      this.enrollData.local_photo = res.loacl_image;
      this.$message.success("上传成功");
    },
    // 上传前钩子
    beforeAvatarUpload: function (file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 3MB!");
        return false;
      }
      return true;
    },
    // 活动详情
    matchDetail: function () {
      const routeUrl = this.$router.resolve({
        name: "MatchFrom",
      });
      window.open(
        routeUrl.href + "?id=" + this.enrollData.event_id + "&key=3",
        "_blank"
      );
    },
    // 报名名单
    enrollList: function (key) {
      let that = this;
      if (key == 1) {
        this.$router.push({
          name: "AuditAllList",
        });
      } else if (key == 2) {
        this.$router.push({
          name: "EnrollList",
        });
      } else {
        this.$router.push({
          name: "AuditList",
          query: {
            id: that.enrollData.event_id,
          },
        });
      }
    },
  },
};
</script>
